<!--  -->
<template>
  <div class="order-item">
    <div class="card-wrap flex">
      <div class="img">
        <img :src="goodsItem.thumb" />
      </div>
      <div class="card-main flex">
        <div class="flex-j-sb ">
          <div class="name ell">{{ goodsItem.title }}</div>
        </div>
        <slot name="subscribe"></slot>
        <slot name="shoplabel"></slot>
      </div>
    </div>

    <slot name="shoptoPay"></slot>
    <slot name="ticketNo"></slot>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: {
    goodsItem: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {}
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数 */
  overflow: hidden;
}

.order-item {
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 0.9375rem 0.8125rem 0.8125rem 0.8125rem;
}

.card-wrap .img {
  width: 3.9375rem;
  height: 3.9375rem;
  margin: 0 0.6875rem 0 0;

  img {
    width: 3.9375rem;
    height: 3.9375rem;
  }
}

.card-main {
  flex-direction: column;
  justify-content: space-between;

  .name {
    font-size: 0.875rem;
    color: #222;
  }

  .attribute {
    margin: 0.5rem 0 0 0;
    font-size: 0.7163rem;
    color: #979797;
  }
}

.attribute .num {
  margin: 0 1.9375rem 0 0;
}
</style>
